import React, {useState} from "react"
import Taro from '@tarojs/taro'
import {View, Input, Text, Radio, Button} from "@tarojs/components"
import {useMaintain, useUserInfo} from '@/hooks'
import {login, requestUserInfo, updateUserInfo} from '@/services/user'
import Loading, {useLoading} from '@/components/Loading/Loading'
import './Index.scss'

/**
 * 文本输入
 */
const useInput = () => {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')

  function onChangeUsername (e) {
    setUsername(e.detail.value)
  }

  function onChangePassword (e) {
    setPassword(e.detail.value)
  }

  return {
    username, password,
    onChangeUsername, onChangePassword
  }
}

const Login: React.FC = () => {
  const [checked, setChecked] = useState(false)
  const {getUserInfo} = useUserInfo()
  const {onMaintain} = useMaintain()

  const {username, password, onChangePassword, onChangeUsername} = useInput()

  const {show, showLoading, hideLoading} = useLoading()

  function toggleChecked () {
      setChecked(!checked)
  }

  async function requestLogin () {
    let userInfo = Taro.getStorageSync('userInfo')
    if (!userInfo.avatarUrl) {
      userInfo = await getUserInfo()
    }
    showLoading()
    const token = await login(username, password)
    Taro.setStorageSync('isLogin', true)
    Taro.setStorageSync('token', token)
    hideLoading()
    if (token === '') {
      Taro.hideLoading()
      await Taro.showToast({
         title: '用户名密码错误',
         icon: 'none',
         duration: 500
      })

      return
    }
    await updateUserInfo(userInfo)
    userInfo = await requestUserInfo()
    Taro.setStorageSync('userInfo', userInfo)
    await Taro.navigateBack({
      delta: 1
    })
  }

  async function onLogin () {
    if (!checked) {
      await Taro.showModal({
        title: '提示',
        content: '是否勾选协议',
        confirmText: '确定',
        cancelText: '取消',
        success (result) {
          if (result.confirm) {
            setChecked(true)
            requestLogin()
          } else {
            Taro.showToast({
              title: '请勾选协议',
              icon: 'none',
              duration: 500,
            })
          }
        }
      })
      return
    }
    requestLogin()
  }

  return <View className='container'>
    <View className='login'>
      <View className='login_title'>云途</View>
      <Input className='input' type='text' placeholder='账号' value={username} onBlur={onChangeUsername} />
      <Input className='input' type='text' password placeholder='密码' value={password} onInput={onChangePassword} />
      <View className='protocol'>
        <Radio className='radio' color='#C5C9FE'
          checked={checked} onClick={toggleChecked}
        />
        <Text className='protocol_content'>
          已阅读并同意<Text className='text'>服务协议</Text>和<Text className='text'>隐私保护协议指引</Text>
        </Text>
      </View>
    </View>
    <View className='bottom_wrap'>
      <View className='bg_pre' />
      <Button className='login_btn' onClick={onLogin}><Text className='iconfont'>&#xe621;</Text></Button>
      <View className='bg_next' />
    </View>
    <View className='tab_wrap'>
      <View className='tab_wrap_phone tab_wrap_view' onClick={onMaintain}>手机号登录</View>
      <Text className='split' />
      <View className='tab_wrap_password tab_wrap_view' onClick={onMaintain}>找回密码</View>
      <Text className='split' />
      <View className='tab_wrap_register tab_wrap_view' onClick={onMaintain}>新用户注册</View>
    </View>
    <Loading showLoading={show} color='#fff' show={show} />
  </View>
}

export default Login
